<template>
    <div class="_section">
      <el-row>
        <el-col :span="24">
          <div class="container plat-data-container">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="first-title">
                  个人信息
                </div>
              </el-col>
              <el-col :span="18">
                <div class="first-title">
                  运单分析
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="data-container bgpart">
                  <!-- <div class="second-title">
                    <i class="my-icon icon-cheliangn" />平台车辆总计
                  </div> -->
                  <div class="text-center">
                    <el-row class="_platCar">
                      <el-col :span="11">
                        <div class="data-val">
                          <CountTo :startVal="0" :endVal="amount" :duration="2600" class=""/>
                        </div>
                        <div class="data-title">银行卡(张)</div>
                      </el-col>
                      <el-col :span="2">
                        <div class="split-line" />
                      </el-col>
                      <el-col :span="11" class="split-line-container">
                        <div class="data-val">
                          <CountTo :startVal="0" :endVal="bankCardNum" :duration="2600" class=""/>
                        </div>
                        <div class="data-title">账户余额</div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
               <!-- 两行数据 第二个选项卡 -->
              <el-col :span="18">
                <el-row :gutter="2">
                  <el-col :span="8">
                    <div class="data-container">
                      <div class="second-title">
                        <i class="my-icon icon-hyd" />货源单总数：
                        <span>{{orderCount}}</span>
                      </div>
                      <div class="text-center">
                        <el-row>
                          <el-col :span="6">
                            <div class="data-val">{{orderNotRecieveCount}}</div>
                            <div class="data-title">未接单</div>
                          </el-col>
                          <el-col :span="6" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{orderRecieveCount}}</div>
                            <div class="data-title">已接单</div>
                          </el-col>
                          <el-col :span="6" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{orderPayCount}}</div>
                            <div class="data-title">已结算</div>
                          </el-col>
                          <el-col :span="6" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{orderCancelCount}}</div>
                            <div class="data-title">已撤销</div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="data-container">
                      <div class="second-title">
                        <i class="my-icon icon-ysd" />运输单总数：
                        <span>{{orderDetailCount}}</span>
                      </div>
                      <div class="text-center">
                        <el-row>
                          <el-col :span="8">
                            <div class="data-val">{{waitOrderDetailCount}}</div>
                            <div class="data-title">待运输</div>
                          </el-col>
                          <el-col :span="8" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{transOrderDetailCount}}</div>
                            <div class="data-title">运输中</div>
                          </el-col>
                          <el-col :span="8" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{sighOrderDetailCount}}</div>
                            <div class="data-title">已卸货</div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="data-container">
                      <div class="second-title">
                        <i class="my-icon icon-hydlx" />货源单类型
                      </div>
                      <div class="text-center">
                        <el-row>
                          <el-col :span="12">
                            <div class="data-val">{{orderCountNoQuote}}</div>
                            <div class="data-title">正常单</div>
                          </el-col>
                          <el-col :span="12" class="split-line-container">
                            <div class="split-line" />
                            <div class="data-val">{{orderCountQuote}}</div>
                            <div class="data-title">内容报价单</div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
    import CountTo from 'vue-count-to'
    import {getShipmentInfo,getOrderCountStatistics} from "@/api/statistics";
    export default {
      components: {
        CountTo
      },
      mounted() {
        getShipmentInfo({}).then(response => {
          let data =  response.data;
          this.amount = data.amount?data.amount:0;
          this.bankCardNum = data.bankCardNum?data.bankCardNum:0;
        })
        getOrderCountStatistics({isShipper:1}).then(response => {
          let data =  response.data;
          this.orderCount = data.orderCount?data.orderCount:0;//货源单总数
          this.orderNotRecieveCount = data.orderNotRecieveCount?data.orderNotRecieveCount:0;//未接单
          this.orderRecieveCount = data.orderRecieveCount?data.orderRecieveCount:0;//已接单
          this.orderPayCount = data.orderPayCount?data.orderPayCount:0;//已结算
          this.orderCancelCount = data.orderCancelCount?data.orderCancelCount:0;//已撤销
          this.orderCountNoQuote = data.orderCountNoQuote?data.orderCountNoQuote:0;//正常单
          this.orderCountQuote = data.orderCountQuote?data.orderCountQuote:0;//报价单
          this.orderDetailCount = data.orderDetailCount?data.orderDetailCount:0;//运输单总数
          this.waitOrderDetailCount = data.waitOrderDetailCount?data.waitOrderDetailCount:0;//待运输
          this.transOrderDetailCount = data.transOrderDetailCount?data.transOrderDetailCount:0;//运输中
          this.sighOrderDetailCount = data.sighOrderDetailCount?data.sighOrderDetailCount:0;//已卸货
        })
      },
      data() {
        return {
          orderCount:0,
          orderNotRecieveCount:0,
          orderRecieveCount:0,
          orderPayCount:0,
          orderCancelCount:0,
          orderCountNoQuote:0,
          orderCountQuote:0,
          orderDetailCount:0,
          waitOrderDetailCount:0,
          transOrderDetailCount:0,
          sighOrderDetailCount:0,
          amount:0,
          bankCardNum:0,
        }
      },
      methods: {
        init(){

        }
      }
    }
  </script>

  <style lang="scss" scoped>
    .dashboard-editor-container {
      padding: 32px;
      background-color: rgb(240, 242, 245);
      position: relative;

      .github-corner {
        position: absolute;
        top: 0px;
        border: 0;
        right: 0;
      }

      .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
      }
    }

    @media (max-width:1024px) {
      .chart-wrapper {
        padding: 8px;
      }
    }

    .title {
      font-size: 16px;
    }

    .container {
      border-radius: 4px;
      // margin: 0 20px;
      padding: 4px;
    }

    .tool-button-container {
      .el-col {
        text-align: center;

        button {
          width: 80%;
        }
      }
    }

    .plat-data-container {

      .data-container {
        height: 180px;
        background-color: #fff;
        padding: 24px;
        font-size: 14px;

        .text-center {
          text-align: center;
        }
      }

      .bgpart {
        background: linear-gradient(-20deg, rgba(128, 67, 246, 1), rgba(61, 177, 243, 1));
        display: flex;
        align-items: center;
        justify-content: center;
        .second-title {
          color: #FFFFFF;
          font-size: 15px;
        }

        ._platCar {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .split-line {
            display: inline-block;
            width: 1px;
            height: 3em;
            vertical-align: middle;
            background-color: #f0f2fa;
          }
        }

        .data-val {
          color: #FFFFFF;
          font-size: 30px;
          // font-weight: 600;
        }

        .data-title {
          width:74px;
          color: #FFFFFF;
          font-size: 14px;
          margin-top: 0;
        }
      }

      .flexBox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .first-title {
        position: relative;
        top:5px;
        padding-left: 14px;
        font-size: 16px;
        /* margin-top: 20px; */
        margin-bottom: 8px;
        // height: 50px;
        border-bottom: none;

        i {
          margin-right: 8px;
        }
      }

      .first-title::before {
        content: '';
        height: 15px;
        width: 4px;
        background-color: #FF7F21;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .second-title {
        margin-left: 16px;
        overflow: hidden;
        font-size: 14px;
        color: #000000;
        line-height: 32px;
        padding: 10px 0 10px 5px;

        i {
          margin-right: 6px;
        }
      }

      .data-title {
        padding: 5px;
        font-size: 14px;
        color: #78909C;
        display: block;
        margin-top: 10px;
      }

      .data-val {
        font-size: 24px;
        color: #000033;
        display: block;
        font-weight: 200;
        padding: 5px;
      }
    }

    .split-line-container {
      position: relative;

      .split-line {
        display: inline-block;
        width: 1px;
        height: 3em;
        vertical-align: middle;
        position: absolute;
        left: 0;
        background-color: #f0f2fa;
      }
    }

    .nav_bg1 {
      background: #0bb2d4;
    }

    .nav_bg2 {
      background: #ff7f21;
    }

    .nav_bg3 {
      background: #677afa;
    }

    .nav_bg4 {
      background: #11c26d;
    }

    .nav_bg5 {
      background: #f4516c;
    }

    .shuju_nav_list {
      display: block;
      overflow: hidden;
      padding: 0 30px;
      height: 108px;
      width: 80%;
      margin: auto;

      .shuju_i {
        display: block;
        border-radius: 50%;
        margin-top: 20px;
        float: left;
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255, 255, 255, 0.3);

        i {
          display: block;
          border-radius: 50%;
          background: #ffffff;
          height: 100%;

          img {
            display: block;
            height: 75%;
            margin: 0 auto;
            padding-top: 25%;
          }
        }
      }

      .shuju_list_xinxi {
        float: left;
        margin-left: 20px;
        color: #fff;
        line-height: 108px;

        span {
          font-size: 1.2em;
          display: block;
        }
      }
    }

    .el-divider__text {
      background: #f0f2f5;
    }
  </style>
